<template>
  <div class="list-container">
    <ul></ul>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, onMounted, reactive, onUnmounted } from 'vue'
const state = reactive<{
  len: number
  once: number
  count: number
  counts: number
  node: any
  i: number
  fragmentId: number
}>({
  len: 10000,
  once: 25,
  count: 0,
  counts: 0,
  node: null,
  i: 0,
  fragmentId: 0
})
const add = () => {
  const fragment = document.createDocumentFragment()
  for (let i = 0; i < state.once; i++) {
    const li = document.createElement('li')
    li.innerText = `item ${i + 1 + 25 * state.counts}`
    fragment && fragment.appendChild(li)
  }
  state.counts++
  state.node && state.node.appendChild && state.node.appendChild(fragment)
  loop()
}

const loop = () => {
  if (state.counts < state.count) {
    state.fragmentId = window.requestAnimationFrame(add)
  } else {
    cancelLoop()
  }
}

const cancelLoop = () => {
  window.cancelAnimationFrame(state.fragmentId)
}

onMounted(() => {
  state.node = document.querySelector('.list-container ul')
  state.count = Number(Math.ceil(state.len / state.once))
  loop()
})

onUnmounted(() => {
  cancelLoop()
})
</script>
<style lang="less" scoped>
.list-container {
  transform: translateZ(0);
}
ul {
  transform: translateZ(0);
  list-style: none;
  :deep(li) {
    transform: translateZ(0);
    background: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 5px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
  }
}
</style>
